<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">

            <!--通过对象语法-->
            <!--<h2 :style="{key(属性名): value(属性值)}">{{message}}</h2>-->
            <!--在这里属性值如果没用单引号引起来 会被当成变量，会去vue实例中找相关变量-->
            <h2 :style="{fontSize: '50px'}">{{message}}</h2>

            <!--在这里当成变量的时候，不用加单引号，连接起来就变成了表达式  +'ps'-->
			<h2 :style="{fontSize:finalSize+'px',backgroundColor:finalColor}">{{message}}</h2>
            <h2 :style="getStyle()">{{message}}</h2>




            <!--通过数组语法绑定 style-->
			<h2 :style="[baseFont,baseBgc]">你好</h2>
		</div>

		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			const app = new Vue({
				el: '#app',
				data: {
					message: 'hello',
					finalSize: 50,
					finalColor: 'red',
					baseFont: {
						fontSize: '50px'
					},
					baseBgc: {
						backgroundColor: 'blue'
					}bu
				},
				methods: {
					getStyle: function() {
						return {
							fontSize: this.finalSize + 'px',
							backgroundColor: this.finalColor
						}
					}
				}
			});
		</script>
	</body>
</html>
